{% extends 'layout/mange.html' %}

{% block title %}{{ project.name }} - BUG列表{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-6">
                            <h3 class="panel-title">{{ project.name }} - BUG列表</h3>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="{% url 'bug_add' project_id=project.id %}" class="btn btn-primary btn-sm">
                                <i class="fa fa-plus"></i> 添加BUG
                            </a>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <form method="get" class="form-inline" style="margin-bottom: 20px;">
                        <div class="form-group">
                            <input type="text" name="search" class="form-control" placeholder="搜索BUG标题" value="{{ filter_params.search_query }}">
                        </div>
                        <div class="form-group ml-2">
                            <select name="status" class="form-control">
                                <option value="">所有状态</option>
                                {% for status in status_options %}
                                <option value="{{ status.id }}" {% if filter_params.status_filter == status.id|stringformat:'i' %}selected{% endif %}>{{ status.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group ml-2">
                            <select name="priority" class="form-control">
                                <option value="">所有优先级</option>
                                {% for priority in priority_options %}
                                <option value="{{ priority.id }}" {% if filter_params.priority_filter == priority.id|stringformat:'i' %}selected{% endif %}>{{ priority.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group ml-2">
                            <select name="assign_to" class="form-control">
                                <option value="">所有指派</option>
                                <option value="unassigned" {% if filter_params.assign_to_filter == 'unassigned' %}selected{% endif %}>未指派</option>
                                {% for user in user_options %}
                                <option value="{{ user.user_id }}" {% if filter_params.assign_to_filter == user.user_id|stringformat:'i' %}selected{% endif %}>{{ user.user__username }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group ml-2">
                            <select name="sort" class="form-control">
                                <option value="create_datetime" {% if filter_params.sort_by == 'create_datetime' %}selected{% endif %}>创建时间</option>
                                <option value="title" {% if filter_params.sort_by == 'title' %}selected{% endif %}>标题</option>
                                <option value="priority" {% if filter_params.sort_by == 'priority' %}selected{% endif %}>优先级</option>
                            </select>
                        </div>
                        <div class="form-group ml-2">
                            <select name="order" class="form-control">
                                <option value="desc" {% if filter_params.sort_order == 'desc' %}selected{% endif %}>降序</option>
                                <option value="asc" {% if filter_params.sort_order == 'asc' %}selected{% endif %}>升序</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary ml-2">筛选</button>
                        <a href="{% url 'bug_list' project_id=project.id %}" class="btn btn-default ml-2">重置</a>
                    </form>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="select-all"></th>
                                <th>标题</th>
                                <th>状态</th>
                                <th>优先级</th>
                                <th>创建人</th>
                                <th>指派给</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for bug in bugs %}
                            <tr>
                                <td><input type="checkbox" name="bug_ids" value="{{ bug.id }}" class="bug-checkbox"></td>
                                <td><a href="{% url 'bug_detail' project_id=project.id bug_id=bug.id %}">{{ bug.title }}</a></td>
                                <td><span class="label" style="background-color: #{{ project.color }};">{{ bug.status.name }}</span></td>
                                <td>{{ bug.priority.name }}</td>
                                <td>{{ bug.creator.username }}</td>
                                <td>{{ bug.assign_to.username|default:'未指派' }}</td>
                                <td>{{ bug.create_datetime|date:'Y-m-d H:i' }}</td>
                                <td>
                                    <a href="{% url 'bug_edit' project_id=project.id bug_id=bug.id %}" class="btn btn-xs btn-info">编辑</a>
                                    <button class="btn btn-xs btn-danger delete-btn" data-url="{% url 'bug_delete' project_id=project.id bug_id=bug.id %}">删除</button>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7" class="text-center">暂无BUG记录</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        </table>

                        <!-- 批量操作 -->
                        <div class="row" style="margin-top: 20px;">
                            <div class="col-md-6">
                                <form method="post" id="batch-action-form" action="{% url 'bug_batch_action' project_id=project.id %}">
                                    {% csrf_token %}
                                    <div class="form-inline">
                                        <div class="form-group">
                                            <select name="action" class="form-control">
                                                <option value="">批量操作</option>
                                                <option value="delete">删除</option>
                                                <option value="change_status">更改状态</option>
                                                <option value="change_priority">更改优先级</option>
                                                <option value="assign_to">指派给</option>
                                            </select>
                                        </div>

                                        <div class="form-group ml-2" id="status-select-container" style="display: none;">
                                            <select name="status_id" class="form-control">
                                                {% for status in status_options %}
                                                <option value="{{ status.id }}">{{ status.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <div class="form-group ml-2" id="priority-select-container" style="display: none;">
                                            <select name="priority_id" class="form-control">
                                                {% for priority in priority_options %}
                                                <option value="{{ priority.id }}">{{ priority.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <div class="form-group ml-2" id="assign-to-select-container" style="display: none;">
                                            <select name="assign_to_id" class="form-control">
                                                {% for user in user_options %}
                                                <option value="{{ user.user_id }}">{{ user.user__username }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <button type="submit" class="btn btn-primary ml-2" id="batch-action-btn" disabled>执行</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(function() {
    // 全选/取消全选
    $('#select-all').click(function() {
        $('.bug-checkbox').prop('checked', $(this).prop('checked'));
        updateBatchActionBtn();
    });

    // 单个复选框点击
    $('.bug-checkbox').click(function() {
        updateBatchActionBtn();
    });

    // 更新批量操作按钮状态
    function updateBatchActionBtn() {
        const checkedCount = $('.bug-checkbox:checked').length;
        $('#batch-action-btn').prop('disabled', checkedCount === 0);
    }

    // 操作类型选择
    $('select[name="action"]').change(function() {
        const action = $(this).val();
        // 隐藏所有容器
        $('#status-select-container, #priority-select-container, #assign-to-select-container').hide();

        // 显示对应的容器
        if (action === 'change_status') {
            $('#status-select-container').show();
        } else if (action === 'change_priority') {
            $('#priority-select-container').show();
        } else if (action === 'assign_to') {
            $('#assign-to-select-container').show();
        }
    });

    // 批量操作表单提交
    $('#batch-action-form').submit(function(e) {
        e.preventDefault();

        // 收集选中的BUG ID
        const bugIds = $('.bug-checkbox:checked').map(function() {
            return $(this).val();
        }).get();

        if (bugIds.length === 0) {
            alert('请选择要操作的BUG');
            return;
        }

        const action = $('select[name="action"]').val();
        if (!action) {
            alert('请选择操作类型');
            return;
        }

        // 添加BUG ID到表单
        const form = $(this);
        // 移除旧的bug_ids字段
        form.find('input[name="bug_ids"]').remove();
        // 添加新的bug_ids字段
        bugIds.forEach(function(id) {
            form.append($('<input type="hidden" name="bug_ids" value="' + id + '">'));
        });

        // 提交表单
        form.unbind('submit').submit();
    });

    // 删除BUG确认
    $('.delete-btn').click(function() {
        var url = $(this).data('url');
        if (confirm('确定要删除这个BUG吗？')) {
            $.ajax({
                url: url,
                type: 'POST',
                data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
                success: function(data) {
                    if (data.status) {
                        location.reload();
                    } else {
                        alert(data.error);
                    }
                },
                error: function() {
                    alert('删除失败，请重试');
                }
            });
        }
    });
});
</script>
{% endblock %}